<template>
  <div>
    <h3>对ElementUI的Input组件进行封装使其只能输入数字，同时保留Input组件原有的事件和方法</h3>
    <el-input style="width: 240px;" v-bind="$attrs" v-on="events" :value="value" @input="onInput">
    </el-input>
  </div>
</template>
<script>

export default {
  name: 'DigitWrapper',
  // 默认为true，没有在props的定义的属性，将会作为普通的html属性定义在组件的根元素上，设置为false，将传递给$attrs
  inheritAttrs: false,
  props: {
    value: [String, Number],
    decimal: {
      type: Number,
      default: 2
    }
  },
  computed: {
    // 定义事件，并且排除我们需要处理的input事件，v-on通过对象绑定事件可以和单独绑定同名事件共存，并且两者都生效
    events () {
      const ret = {}
      Object.keys(this.$listeners).forEach(key => {
        if (key !== 'input') {
          ret[key] = this.$listeners[key]
        }
      })
      return ret
    }
  },
  methods: {
    onInput (value) {
      const reg = new RegExp(`^(([1-9]{1}\\d*)|([0]{1}))(\\.(\\d){0,${this.decimal}})?$`)
      if (reg.test(value) || value === '') {
        this.$emit('input', value)
      }
    }
  }
}
</script>
